<template>
  <div ref="order" :style="{ height: orderH + 'px' }" class="order-swiper">
    <swiper
      class="my-swiper"
      :options="swiperOptions"
      @slideChange="myChange($event)"
      ref="swiper"
    >
      <swiper-slide class="swiper-item">
        <scroll :sHeight="orderH + ''">
          <div class="order-box">
            <div class="order-logo">
              <img src="../../static/img/order-logo.png" alt="" />
            </div>
            <div class="order-des">
              <div class="order-title">
                <p class="order-shop-name">有家奶茶</p>
                <p class="order-state">已完成</p>
              </div>
              <div class="order-goods">
                <div class="order-goods-item">
                  <p class="goods-name">【新店优惠】波霸奶茶</p>
                  <p class="goods-count">x1</p>
                </div>
                <div class="order-goods-item">
                  <p class="goods-name">【新店优惠】波霸奶茶</p>
                  <p class="goods-count">x1</p>
                </div>
              </div>
              <p class="order-price">共2件商品，实付<span>￥46.50</span></p>
              <div class="order-btn">
                <div>再来一单</div>
              </div>
            </div>
          </div>
          <div class="order-box">
            <div class="order-logo">
              <img src="../../static/img/order-logo.png" alt="" />
            </div>
            <div class="order-des">
              <div class="order-title">
                <p class="order-shop-name">有家奶茶</p>
                <p class="order-state">已完成</p>
              </div>
              <div class="order-goods">
                <div class="order-goods-item">
                  <p class="goods-name">【新店优惠】波霸奶茶</p>
                  <p class="goods-count">x1</p>
                </div>
                <div class="order-goods-item">
                  <p class="goods-name">【新店优惠】波霸奶茶</p>
                  <p class="goods-count">x1</p>
                </div>
              </div>
              <p class="order-price">共2件商品，实付<span>￥46.50</span></p>
              <div class="order-btn">
                <div>再来一单</div>
              </div>
            </div>
          </div>
          <div style="width: 100%; height: 10px"></div>
        </scroll>
      </swiper-slide>
      <swiper-slide class="swiper-item">
        <scroll :sHeight="orderH + ''" :data="list">
          <div class="order-box" v-for="(item, index) in list" :key="index">
            <div class="order-logo">
              <img src="../../static/img/order-logo.png" alt="" />
            </div>
            <div class="order-des">
              <div class="order-title">
                <p class="order-shop-name">有家奶茶</p>
                <p class="order-state">已完成</p>
              </div>
              <div class="order-goods">
                <div class="order-goods-item">
                  <p class="goods-name">【新店优惠】波霸奶茶</p>
                  <p class="goods-count">x1</p>
                </div>
                <div class="order-goods-item">
                  <p class="goods-name">【新店优惠】波霸奶茶</p>
                  <p class="goods-count">x1</p>
                </div>
              </div>
              <p class="order-price">共2件商品，实付<span>￥46.50</span></p>
              <div class="order-btn">
                <div>再来一单</div>
              </div>
            </div>
          </div>
          <div style="width: 100%; height: 10px"></div>
        </scroll>
      </swiper-slide>
      <swiper-slide class="swiper-item">
        <scroll :sHeight="orderH + ''">
          <div class="order-box">
            <div class="order-logo">
              <img src="../../static/img/order-logo.png" alt="" />
            </div>
            <div class="order-des">
              <div class="order-title">
                <p class="order-shop-name">有家奶茶</p>
                <p class="order-state">已完成</p>
              </div>
              <div class="order-goods">
                <div class="order-goods-item">
                  <p class="goods-name">【新店优惠】波霸奶茶</p>
                  <p class="goods-count">x1</p>
                </div>
                <div class="order-goods-item">
                  <p class="goods-name">【新店优惠】波霸奶茶</p>
                  <p class="goods-count">x1</p>
                </div>
              </div>
              <p class="order-price">共2件商品，实付<span>￥46.50</span></p>
              <div class="order-btn">
                <div>再来一单</div>
              </div>
            </div>
          </div>
          <div class="order-box">
            <div class="order-logo">
              <img src="../../static/img/order-logo.png" alt="" />
            </div>
            <div class="order-des">
              <div class="order-title">
                <p class="order-shop-name">有家奶茶</p>
                <p class="order-state">已完成</p>
              </div>
              <div class="order-goods">
                <div class="order-goods-item">
                  <p class="goods-name">【新店优惠】波霸奶茶</p>
                  <p class="goods-count">x1</p>
                </div>
                <div class="order-goods-item">
                  <p class="goods-name">【新店优惠】波霸奶茶</p>
                  <p class="goods-count">x1</p>
                </div>
              </div>
              <p class="order-price">共2件商品，实付<span>￥46.50</span></p>
              <div class="order-btn">
                <div>再来一单</div>
              </div>
            </div>
          </div>
          <div style="width: 100%; height: 10px"></div>
        </scroll>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/swiper-bundle.css";
import scroll from "../../components/common/scroll";
import { mapState } from "vuex";
export default {
  components: {
    Swiper,
    SwiperSlide,
    scroll,
  },
  computed: {
    ...mapState(["orderH"]),
  },
  methods: {
    //监听当前index
    myChange($event) {
      //将当前Index传给父组件
      this.$emit("orderIndex", $event.activeIndex);
      this.activeIndex = $event.activeIndex;
    },
  },
  data() {
    return {
      swiperOptions: {},
      scrollHeight: "0",
      activeIndex: 0,
      list: [1, 2, 3, 4],
    };
  },
  props: {
    orderIndex: {
      type: Number,
      default: 0,
    },
  },
  watch: {
    orderIndex(newVal) {
      //跳转对应slide
      this.$refs.swiper.$swiper.slideTo(newVal);
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.swiper-slide-active {
  height: auto;
}
.order-swiper {
  height: 14.08rem;
  .my-swiper {
    height: 100%;
    .swiper-item {
      padding: 0 0.32rem;
      box-sizing: border-box;
      height: fit-content;
      .order-box {
        width: 9.333333rem;
        background-color: #fff;
        margin-top: 0.213333rem;
        display: flex;
        justify-content: flex-start;
        box-sizing: border-box;
        padding-left: 0.226667rem;
        padding-top: 0.226667rem;
        padding-bottom: 0.333333rem;
        border-radius: 0.333333rem;
        .order-logo {
          width: 0.8rem;
          height: 0.8rem;
          overflow: hidden;
          border-radius: 50%;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .order-des {
          flex: 1;
          padding: 0 0.266667rem;
          box-sizing: border-box;
          .order-title {
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 0.88rem;
            padding-bottom: 0.133333rem;
            border-bottom: 1px solid #f5f5f5;
            .order-shop-name {
              font-size: 0.4rem;
              color: #333;
              font-weight: bold;
            }
            .order-state {
              font-size: 0.4rem;
              color: #666;
            }
          }
          .order-goods {
            margin-top: 0.466667rem;
            width: 100%;
            .order-goods-item {
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              color: #999;
              font-size: 0.373333rem;
              margin-bottom: 0.32rem;
            }
          }
          .order-price {
            font-size: 0.373333rem;
            color: #999;
            text-align: right;
            span {
              color: #333;
              font-weight: bold;
            }
          }
          .order-btn {
            font-size: 0.373333rem;
            color: #5e98fb;
            display: flex;
            justify-content: flex-end;
            margin-top: 0.2rem;
            div {
              border-radius: 0.4rem;
              border: 1px solid #5e98fb;
              padding: 0.106667rem 0.2rem;
            }
          }
        }
      }
    }
  }
}
</style>